<template>
  <div>
    <el-table
      :data="tableData"
      style=" 100%"
      @selection-change="selected"
      >
      <el-table-column
        type="selection"
        width="50"
        >
      </el-table-column>
      <el-table-column
        label="商品名称"
        width="160">
        <template slot-scope="scope">
          <div>
            <img :src="scope.row.furl" style="height: 50px; 50px">
            <span style="font-size: 18px;" header-align="center" align="center">{{scope.row.fname}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="单价"
        width="150"
        prop="sprice">
      </el-table-column>
      <el-table-column
        label="数量"
        width="200">
        <template slot-scope="scope">
          <div>
            <el-input
              v-model="scope.row.snumber" @change="handleInput(scope.row)" :disabled="edit">
              <el-button slot="prepend" @click="del(scope.row)"><i class="el-icon-minus"></i></el-button>
              <el-button slot="append" @click="add(scope.row)" ><i class="el-icon-plus"></i></el-button>
            </el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="小计"
        width="150"
        prop="price"
       
        >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="handleDelete(scope.row)">
          删除<i class="el-icon-delete2 el-icon--right"></i>
          </el-button> 
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-button type="info" style="float: right" @click="jiesuan()">{{"结算" + moneyTotal}}</el-button>
    <el-dialog :visible.sync="dialogFormVisible" title="查看详情">
      <el-form :model="order">
        <el-form-item label="请输入地址" :label-width="formLabelWidth">
          <el-input v-model="order.omessage" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth" >
          <el-input v-model="order.onote" autocomplete="off" :disabled="edit"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" :label-width="formLabelWidth" >
          <el-input v-model="order.snumber" autocomplete="off" :disabled="edit"></el-input>
        </el-form-item>
        <el-form-item label="商品单价" :label-width="formLabelWidth" >
          <el-input v-model="order.danjia" autocomplete="off" :disabled="edit"></el-input>
        </el-form-item> 
        <el-form-item label="商品总价" :label-width="formLabelWidth" >
          <el-input v-model="order.zongjia" autocomplete="off" :disabled="edit"></el-input>
        </el-form-item>
        <el-form-item label="优惠券"  :label-width="formLabelWidth" >
          <el-select v-model="order.ocoupan"  placeholder="请选择优惠券" @change="gaibian(order.ocoupan)">
             <el-option v-for="item in UsersCoupanList"
              :key="item.cname"
              :label="item.cname"
              :value="item.cmoney"
              ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实付" :label-width="formLabelWidth">
          <span v-if="order.ocoupan==undefined && this.isMemberd==1">{{fun(order.zongjia*0.8)}}</span>
          <span v-if="order.ocoupan==undefined && this.isMemberd==0">{{fun(order.zongjia)}}</span>
          <span v-if="this.isMemberd==1 && order.ocoupan != undefined" >{{fun(order.zongjia*0.8-this.order.ocoupan)}}</span>
          <span v-if="this.isMemberd==0  && order.ocoupan != undefined">{{fun(order.zongjia-this.order.ocoupan)}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="addOrder()">提交订单</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
const axios = require("axios");
axios.defaults.baseURL = '/api/'

export default{
    data() {
      return {
        tableData: [],
        moneyTotal:0,
        multipleSelection:[],
        dialogFormVisible:false,
        order: {
        omessage: '',
        oprice: '',
        onote: '',
        ocoupan: '',
        orprice: '',
        danjia:'',        
        zongjia:'',
      },
        formLabelWidth: '120px',
        edit: true,
        UsersCoupanList:[],
        isMemberd:'',
        max:'',
        shifukuan:'',
      }
    },
    methods:{
      fun(val){
        console.log("获取到的"+val);
        if(Number(val)<0){
          val=0;
          this.order.orprice=0;
          return Number(val);
        }else{
          return Number(val).toFixed(2);
        }
        　
      },
      gaibian(s){
        this.order.ocoupan=s
      },
      getKucun(){
        console.log(this.tableData[0].fid);
        axios.get('/fruit/getFruitById/'+this.tableData[0].fid).then(res=>{
          this.max=res.data.data.fstock
          console.log("直接获取到的最大值"+this.max);
        })
      },   
      isMember(){
          axios.get('/users/isMember/1').then(res=>{
            this.isMemberd=res.data;
            console.log("会员"+this.isMemberd);
          })
      },
      getUsersCoupanList(){
        // console.log("总价"+this.order.zongjia);
        axios.get('/coupan/getUsersCoupanList1/1/').then(res=>{
          console.log(res.data);
          this.UsersCoupanList=res.data;
        })
      },
      cancel: function () {
      this.$message.info("当前操作已取消")
      this.dialogFormVisible = false
    },
      jiesuan(){
       console.log(this.tableData);
       this.order=this.tableData[0]
       this.order.onote=this.tableData[0].fname
       this.order.zongjia=this.tableData[0].price
       this.order.danjia=this.tableData[0].sprice;
       this.order.oprice=this.moneyTotal;
       this.getUsersCoupanList();
       this.dialogFormVisible=true
      },
      addOrder(){
        if(this.UsersCoupanList.length==0){
          this.order.ocoupan=0;
          if(this.isMemberd==1){
            if((this.order.zongjia*0.8-this.order.ocoupan).toFixed(2)<0){
              this.order.orprice=0;
            }else{
               this.order.orprice=(this.order.zongjia*0.8-this.order.ocoupan).toFixed(2)
            }
        }else{
          if((this.order.zongjia-this.order.ocoupan).toFixed(2)<0){
             this.order.orprice=0;
          }else{
             this.order.orprice=(this.order.zongjia-this.order.ocoupan).toFixed(2)
          }
         
        }
        }else{
          if(this.isMemberd==1){
            if((this.order.zongjia*0.8-this.order.ocoupan).toFixed(2)<0){
              this.order.orprice=0;
            }else{
                this.order.orprice=(this.order.zongjia*0.8-this.order.ocoupan).toFixed(2)
            }
        }else{
          if((this.order.zongjia-this.order.ocoupan).toFixed(2)<0){
            this.order.orprice=0;
          }else{
          this.order.orprice=(this.order.zongjia-this.order.ocoupan).toFixed(2)
          }
        }
        }
        
        axios({
          url:'/order/addOrder',
          method:'post',
          data: this.order,
        }).then(res=>{
          console.log(res);
          this.dialogFormVisible=false
        })
      },
        gouwuche(){
      axios.get('/shopcar/myCar/1').then(res=>{
        this.tableData = res.data;
        console.log(res.data);
        console.log("购物车"+this.tableData);
      })
    },
         handleDelete(row) {
        
        this.$confirm('确定删除该商品？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         axios.get('/shopcar/delCar/'+row.sid).then(res=>{
             this.gouwuche();
         })
          this.$message({
            type: 'success',
            message: '删除成功!'
            
          });
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }, handleInput:function(value){
        if(null==value.snumber || value.snumber==""){
          value.snumber=1;
        }
        value.price=(value.snumber*value.sprice).toFixed(2);//保留两位小数
        //增加商品数量也需要重新计算商品总价
        this.selected(this.multipleSelection);
      },
      add:function(addGood){
        //输入框输入值变化时会变为字符串格式返回到js
        //此处要用v-model，实现双向数据绑定
        if(typeof addGood.snumber=='string'){
          addGood.snumber=parseInt(addGood.snumber);
        };
                  this.getKucun();
               if(this.max==''){
                addGood.snumber+=1;
                addGood.price=(addGood.snumber*addGood.sprice).toFixed(2);
               }
        else if(addGood.snumber<this.max){
        addGood.snumber+=1;
        addGood.price=(addGood.snumber*addGood.sprice).toFixed(2);
        }else{
          alert("库存不足！")
        }
       
        console.log(addGood.snumber);
      },
      del:function(delGood){
        if(typeof delGood.snumber=='string'){
          delGood.snumber=parseInt(delGood.snumber);
        };
        if(delGood.snumber>1){
          delGood.snumber-=1;
          delGood.price=(delGood.snumber*delGood.sprice).toFixed(2);
        } 
      },
      //返回的参数为选中行对应的对象
      selected:function(selection){
        this.multipleSelection=selection;
        this.moneyTotal=0;
        // if(this.multipleSelection==''){
        //   console.log("空");
        // }
        // console.log("选择"+selection+"haiahi");
        //此处不支持forEach循环，只能用原始方法了
        for(var i=0;i<selection.length;i++){
          //判断返回的值是否是字符串
          if(typeof selection[i].goodTotal=='string'){
            selection[i].goodTotal=parseInt(selection[i].goodTotal);
          };
          selection[i].sstatus=1;
          // console.log(selection[i].sstatus);
          this.moneyTotal+=selection[i].price;
        }
      },
    },
    created(){
        this.gouwuche();
        this.isMember();
    }
}

</script>
